<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		hr{
			border: 1px solid #666;
		}
		body{
			margin: 80px;
		}
	</style>
</head>
<body>
	<!-- popover弹出框插件就是当点击一个元素时弹出一个包含标题和内容的弹框，基本工具提示插件 -->

	<button class="btn btn-info" id="btn" 
		data-toggle="popover" 
		title="<i>Doyoudo</i>"
		data-content="<div class='text-info'>welcome <strong>to</strong> Doyoudo</div>"
		data-animation="false"
		data-html="true"
		data-delay="1000"
		data-placement="top"
		data-trigger="hover"
	>Doyoudo</button>

	<button class="btn btn-primary" id="btn2" data-toggle="popover">Bootstrap</button>
	<br>
	<br>

	<div style="width: 100px;height: 100px;" class="bg-success"  data-toggle="popover" id="Doyoudo"></div>
	<br>
	<br>
	<button class="btn btn-success" id="btn3">点击此按钮在div上弹框</button>

	<script>
		//必须进行初始化
		$('#btn').popover();	

		$('#btn2').popover({
			title:'Bootstrap框架',
			content:'Bootstrap是一个开源的前端框架。。。',
			placement:'bottom'
		});	

		$('#btn3').on('click',function(){
			$('#Doyoudo').popover({
				title:'Doyoudo',
				content:'Doyoudo',
				trigger:'manual'
			}).popover('show');
		});


		$('[data-toggle="popover"]').on('shown.bs.popover',function(){
			var _this=this;
			setTimeout(function(){
				$(_this).popover('hide');
			},1000);
		});

	</script>

</body>
</html>